<template>
    <view class="code-password">
        <view class="title">输入验证码</view>
        <view class="subtitle">验证码将发送到你的手机</view>
        <view class="input-area">
            <u-input v-model="vodeNum" type="number" placeholder="请输入验证码" border="none" :customStyle="{ borderRadius: '40rpx' }">
                <template slot="prefix">
                    <view class="solt-left">
                        <u-icon name="lock-open" size="20" color="#909399"></u-icon>
                    </view>
                </template>
                <template slot="suffix">
                    <u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
                    <u-button :customStyle="{ borderRadius: '40rpx', color: '#FFFFFFFF', backgroundColor: '#4DACB1FF' }"
                        @tap="getCode" :text="tips" type="success" size="mini"></u-button>
                </template>
            </u-input>
        </view>
        <u-button @click="nextHandle" text="下一步" :disabled="!vodeNum.length" color="#4DACB1FF"
            style="width: 90%; margin-top: 60rpx;"></u-button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tips: '',
            phone: null,
            vodeNum: '',
            uuid: '',
            list: [
                {
                    name: '86'
                }
            ],
            show: false
        }
    },
    onLoad(options) {
        this.phone = options.phone
    },
    methods: {
        nextHandle() {
            let that = this
            uni.navigateTo({
                url: '/pages/login/setPassword',
                success: function (res) {
                    let obj = {
                        username: that.phone,
                        code: that.vodeNum,
                        uuid: that.uuid || 'fdfsdf544555'
                    }
                    res.eventChannel.emit('emitDataHandle', { data: obj })
                }
            });
        },
        codeChange(text) {
            this.tips = text;
        },
        getCode() {
            if (this.$refs.uCode.canGetCode) {
                // 模拟向后端请求验证码
                uni.showLoading({
                    title: '正在获取验证码'
                })
                this.$http.get('/captchaSms', { phone: this.phone }).then(res => {
                    if (res.code == 200) {
                        this.uuid = res.uuid
                        uni.hideLoading();
                        uni.$u.toast('验证码已发送');
                        // 通知验证码组件内部开始倒计时
                        this.$refs.uCode.start();
                    } 
                })
            } else {
                uni.$u.toast('倒计时结束后再发送');
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.code-password {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(247, 248, 250, 1);
    .title {
        padding-top: 60rpx;
        font-size: 64rpx;
        font-weight: 500;
        color: rgba(12, 16, 25, 1);
    }

    .subtitle {
        margin-top: 20rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(103, 117, 133, 1);
    }

    .input-area {
        width: 80%;
        margin: 0 auto;
        margin-top: 60rpx;
        padding: 20rpx 40rpx;
        background: #FFFFFFFF;
        border-radius: 100rpx;

        .solt-left {
            display: flex;
            align-items: center;

            .country {
                margin-left: 20rpx;
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(12, 16, 25, 1);
                margin-right: 12rpx;
            }
        }
    }
}
</style>